<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout Container Demo 2</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css";
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js" 
        djConfig="parseOnLoad: true"></script>
    <style>  
        /* NOTE: for a full screen layout, must set body size equal to the viewport. */
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script type="text/javascript">
    dojo.require("dojo.parser");
    /*
    dojo.require("dijit.layout.AccordionPane");
    */
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.SplitContainer");
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.StackContainer");    
    dojo.require("dijit.form.Button");
     </script>
</head>
<body class="tundra">
	<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;" design="headline">
		<div dojoType="dijit.layout.ContentPane" region="top" style="background:black;color:white;height:40px">TOP</div>
		<div dojoType="dijit.layout.ContentPane" region="left" style="background-color:#eee;width: 120px;">Table of Contents</div>
		<div dojoType="dijit.layout.ContentPane" region="center" style="background-color:#f6f6f6">
			<div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="7" activeSizing="true" style="border: 1px solid #bfbfbf; width: 400px; height: 300px;">
				<div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
					<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:500px;height:100px">
						<div id="HanselGretel" dojoType="dijit.layout.ContentPane" title="Hansel and Gretel" closable="true" selected="true">
							Hard by a great forest dwelt a poor wood-cutter with his wife 
							and his two children. The boy was called Hansel and the girl Gretel.
							He had little to bite and to break, and once when great dearth fell 
							on the land, he could no longer procure even daily bread. 
						</div>
						<div id="GreenTwigs" dojoType="dijit.layout.ContentPane" title="The Three Green Twigs">
							There was once upon a time a hermit who lived in a forest at the foot 
							of a mountain, and passed his time in prayer and good works, 
							and every evening he carried, to the glory of God, two pails of water 
							up the mountain. 
						</div>
					</div>        
				</div>
				<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
					<div dojoType="dijit.layout.AccordionContainer" duration="200" style="margin-right: 30px; width: 400px; height: 300px; overflow: hidden">
						<div dojoType="dijit.layout.AccordionPane" selected="true" title="Pane 1" href="content.html">
							<p >Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin ...</p >
						</div>
						<div dojoType="dijit.layout.AccordionPane" title="Pane 2 (lazy load)" href="content.html" ></div>
						<div dojoType="dijit.layout.AccordionPane" title="Pane 3">
							<div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
								<button id="previous" onClick="dijit.byId('StackContainer').back()"><</button>
								<button id="next" onClick="dijit.byId('StackContainer').forward()">></button>
								<div id="StackContainer" dojoType="dijit.layout.StackContainer" style="width: 90%; border:1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;"> 
									<div id="Page1" dojoType="dijit.layout.ContentPane" label="Intro">
										This version of the GNU Lesser General Public License incorporates
										the terms and conditions of version 3 of the GNU General Public
										License, supplemented by the additional permissions listed below.
									</div>
									<div id="Page2" dojoType="dijit.layout.ContentPane">
										As used herein, "this License" refers to version 3 of the GNU Lesser
										General Public License, and the "GNU GPL" refers to version 3 of the GNU
										General Public License. "The Library" refers to a covered work governed by 
										this License, other than an Application or a Combined Work as defined below.
									</div>						
									<div id="Page3" dojoType="dijit.layout.ContentPane" >
										You may convey a covered work under sections 3 and 4 of this License
										without being bound by section 3 of the GNU GPL.
									</div>
									<div id="Page4" dojoType="dijit.layout.ContentPane" href="content.html"></div>
								</div>			                			
							</div>
						</div>                
					</div>
	    	    </div>
			</div>
	    </div>
		<div dojoType="dijit.layout.ContentPane" region="bottom" style="background:#666;color:white;height:20px">BOTTOM</div>	    
	</div>
</body>
</html>